<template>
  <section class="news">
      <div class="left">
        <img src="@/assets/images/home/bao.jpg"/>
      </div>
      <div class="center" id="center">
        <p class="mask"></p>
        <cube-slide
          class="slide-container"
          ref="slide"
          :data="news.newsList"
          @change="changePage"
          :showDots="false"
          direction="vertical"
        >
          <cube-slide-item v-for="(item, index) in news.newsList" :key="index">
            <p class="text"><span>{{item.Label}}</span>{{item.title}}</p>
          </cube-slide-item>
        </cube-slide>
      </div>
      <div class="right">
        <p>更多</p>
      </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ExpressNews',
  computed: {
    ...mapState(['news'])
  },
  methods: {
    changePage (current) {
      // console.log('当前轮播图序号为:' + current)
    },
    clickHandler (item, index) {
      console.log(item, index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../../../../../assets/styl/color.styl'
  .news
    margin: 0 10px 10px
    background #fff
    box-sizing border-box
    display flex
    align-items center
    justify-content center
    text-align center
    border-radius 5px
    height 30px
    .left
      width 20%
      text-align left
      img
        width 100%
        height 16px
    .center
      width 65%
      position relative
      .mask
        width 100%
        position absolute
        z-index 9
        top 0
        height 30px
      .slide-container
        height 30px
        overflow hidden
        .text
          font-size 12px
          padding 10px 0
          color: #181818
          ellipsis()
          span
            color: #f23030
            margin-right 6px
            font-size 12px
    .right
      width 10%
      border-left 1px solid #ececec
      p
        font-size 12.5px
</style>
